import { View } from "@tarojs/components";
import { AbstractImage, Header, Icon } from "@/components";
import style from "./index.module.scss";
import { navigateTo } from "@/utils/navigation";
import { AddressFieldShape, UserInfoShape } from "@/data/user/userTypes";
import { formatDateString } from "@/utils";

type UserDetailsOverviewProps = {
  userDetails: UserInfoShape;
  addressDetails: AddressFieldShape;
  imagePaths: {
    topBgUrl: string;
    centerBgUrl: string;
  };
};

const C31UserDetailsOverview = ({
  userDetails,
  addressDetails,
  imagePaths,
}: UserDetailsOverviewProps) => {
  return (
    <View className={style["user-details-overview-wrapper"]}>
      <AbstractImage
        className={`${style["background-image"]} ${style["background-image-top"]}`}
        src={imagePaths.topBgUrl}
        type="none"
      />
      <AbstractImage
        className={`${style["background-image"]} ${style["background-image-middle"]}`}
        src={imagePaths.centerBgUrl}
        type="none"
      />
      <View className={style["content"]}>
        <View className={style["user-info-section"]}>
          <View className={style["top-row"]}>
            <Header type="heading-n">基本个人信息</Header>
            <Icon
              className={style.edit}
              type="Edit"
              onClick={() => {
                navigateTo("pages/user-details-edit/index");
              }}
            />
          </View>
          <View className={style["user-details"]}>
            <View className={style.label}>称谓</View>
            <View className={style.info}>{userDetails.title ?? "无"}</View>
            <View className={style.label}>姓名</View>
            <View className={style.info}>{userDetails.nickName}</View>
            <View className={style.label}>电话</View>
            <View className={style.info}>{userDetails.phoneNumber}</View>
            <View className={style.label}>邮箱</View>
            <View className={style.info}>{userDetails.email}</View>
            <View className={style.label}>省-市-区</View>
            <View className={style.info}>
              {userDetails.residenceArea.join("")}
            </View>
            <View className={style.label}>生日</View>
            <View className={style.info}>
              {formatDateString(userDetails.birthDay)}
            </View>
          </View>
        </View>
        <View className={style["address-section"]}>
          <View className={style["top-row"]}>
            <Header type="heading-n">配送信息</Header>
            <Icon
              className={style.edit}
              type="Edit"
              onClick={() => {
                navigateTo("pages/address-details/index");
              }}
            />
          </View>
          {!addressDetails ? (
            <View className={style["no-addresses"]}>暂无配送信息</View>
          ) : (
            <View className={style["address-listing"]}>
              <View>
                {addressDetails.residenceArea && addressDetails.residenceArea.join("")}
                {addressDetails.address}
              </View>
              <View className={style["contact-info"]}>
                <View className={style["name"]}>{addressDetails.name}</View>
                <View>{addressDetails.phone}</View>
              </View>
            </View>
          )}
        </View>
      </View>
    </View>
  );
};

export default C31UserDetailsOverview;
